// The prefix to use on all css classes
$ant-prefix: sm-component;

// ICONFONT
$iconfont-css-prefix: anticon;
$iconfont-class-prefix: sm-components-icon;

// An override for the html selector for theme prefixes
$html-selector: html;

$blue-6: var(--primary-color);
$red-6: var(--danger-color);

// -------- Colors -----------
$primary-color: $blue-6;
$info-color: var(--info-color);
$success-color: var(--success-color);
$processing-color: $blue-6;
$error-color: $red-6;
$highlight-color: $red-6;
$warning-color: var(--warning-color);
$normal-color: #d9d9d9;
$white: #fff;
$black: #000;

// Color used by default to control hover and active backgrounds
$selected-color: var(--selected-color); // equal rgba($primary-color, 0.15)
$hover-color: var(--hover-color); // equal $primary-5
$click-color: var(--click-color); // equal $primary-7

$primary-1: var(--primary-1);
$primary-2: var(--primary-2);
$primary-3: var(--primary-3);
$primary-4: var(--primary-4);
$primary-5: var(--primary-5);
$primary-6: var(--primary-6); // equal $primary-color
$primary-7: var(--primary-7);
$primary-8: var(--primary-8);
$primary-9: var(--primary-9);
$primary-10: var(--primary-10);

$success-1: var(--success-1);
$success-2: var(--success-2);
$success-3: var(--success-3);
$success-4: var(--success-4);
$success-5: var(--success-5);
$success-6: var(--success-6); // equal $success-color
$success-7: var(--success-7);

$info-1: var(--info-1);
$info-2: var(--info-2);
$info-3: var(--info-3);
$info-4: var(--info-4);
$info-5: var(--info-5);
$info-6: var(--info-6); // equal $info-color
$info-7: var(--info-7);

$warning-1: var(--warning-1);
$warning-2: var(--warning-2);
$warning-3: var(--warning-3);
$warning-4: var(--warning-4);
$warning-5: var(--warning-5);
$warning-6: var(--warning-6); // equal $warning-color
$warning-7: var(--warning-7);

$danger-1: var(--danger-1);
$danger-2: var(--danger-2);
$danger-3: var(--danger-3);
$danger-4: var(--danger-4);
$danger-5: var(--danger-5);
$danger-6: var(--danger-6); // equal $danger-color
$danger-7: var(--danger-7);

// Background color for `<body>`
$body-background: var(--background);
$body-background-without-opacity: var(--background-without-opacity);

// Base background/text color for most components
$component-background: var(--component-background);
$component-background-without-opacity: var(--component-background-without-opacity);
$text-color: var(--text-color);
$text-color-secondary: var(--text-color-secondary);
$text-color-inverse: $white;
$text-color-without-opacity: var(--text-color-without-opacity);
$icon-color: inherit;
$icon-color-hover: var(--icon-color-hover);
$heading-color: var(--heading-color);
$heading-color-dark: rgba($white, 1);
$text-color-dark: rgba($white, 0.85);
$text-color-secondary-dark: rgba($white, 0.65);
$text-selection-bg: $primary-color;

// The background colors for active and hover states for things like
// list items or table cells.
$item-active-bg: $primary-1;
$item-hover-bg: $primary-1;

// LINK
$link-color: $primary-6;
$link-hover-color: $primary-5;
$link-active-color: $primary-7;

// Border color
$border-color-base: var(--border-color-base); // base border outline a component
$border-color-split: var(--border-color-split); // split border inside a component
$border-color-inverse: $white;

// Outline
$outline-color: $primary-6;

$background-color-light: var(--background-light);
$background-color-base: var(--background-base);

// Disabled states
$disabled-color: var(--disabled-text-color);
$disabled-bg: var(--disabled-bg-color);
$disabled-color-dark: rgba($white, 0.35);
$disabled-border-color: var(--disabled-border-color);

// Shadow
$shadow-color: var(--shadow-color);
$primary-shadow-color: var(--primary-shadow-color);
$danger-shadow-color: var(--danger-shadow-color);
$shadow-color-inverse: $component-background;
$shadow-1-up: 0 -2px 7px $shadow-color;
$shadow-1-down: 0 2px 7px $shadow-color;
$shadow-1-left: -2px 0 7px $shadow-color;
$shadow-1-right: 2px 0 7px $shadow-color;
$shadow-2: 0 4px 12px $shadow-color;
$box-shadow-base: $shadow-1-down;

// scroll
$scrollbar-background: var(--scrollbar-background);

// Buttons
$btn-shadow: none;
$btn-primary-shadow: none;
$btn-text-shadow: none;

$btn-primary-color: var(--button-primary-color);
$btn-primary-bg: $primary-color;

$btn-default-color: $text-color;
$btn-default-bg: transparent;
$btn-default-border: var(--button-border-default-color);

$btn-danger-color: $red-6;
$btn-danger-bg: transparent;
$btn-danger-border: $red-6;

$btn-ghost-color: $text-color;
$btn-ghost-bg: transparent;
$btn-ghost-border: $border-color-base;

$btn-disable-color: $disabled-color;
$btn-disable-bg: $disabled-bg;
$btn-disable-border: $disabled-border-color;

$btn-group-border: $primary-5;

$btn-height-md: 28px;

// Checkbox
$checkbox-color: $primary-6;
$checkbox-check-color: #fff;

// Descriptions
$descriptions-bg: #fafafa;

// Dropdown
$dropdown-selected-color: $primary-6;

// Empty
$empty-shadow-color: var(--empty-shadow-color);
$empty-stroke-color: var(--empty-stroke-color);
$empty-top-color: var(--empty-top-color);
$empty-bottom-color: var(--empty-bottom-color);
$empty-description-color: var(--empty-description-color);

// Radio
$radio-dot-color: $primary-6;
$radio-inner-disabled-bg: var(--radio-inner-disabled-bg);

// Radio buttons
$radio-button-bg: $component-background;
$radio-button-checked-bg: $component-background;
$radio-button-color: $text-color;
$radio-button-hover-color: $primary-5;
$radio-button-active-color: $primary-7;

// Layout
$layout-body-background: #f0f2f5;
$layout-header-background: #001529;
$layout-footer-background: $layout-body-background;
$layout-sider-background: $layout-header-background;
$layout-trigger-background: #002140;
$layout-trigger-color: #fff;

// Layout light theme
$layout-sider-background-light: #fff;
$layout-trigger-background-light: #fff;
$layout-trigger-color-light: $text-color;

// Input
$input-placeholder-color: var(--placeholder-color);
$input-color: $text-color;
$input-border-color: $border-color-base;
$input-bg: $component-background;
$input-hover-border-color: $primary-5;
$input-number-hover-border-color: $input-hover-border-color;
$input-number-handler-active-bg: $background-color-base;
$input-number-handler-hover-bg: $primary-5;
$input-number-handler-bg: $component-background;
$input-number-handler-border-color: $border-color-base;
$input-addon-bg: $background-color-light;
$input-disabled-bg: $disabled-bg;
$input-height-md: 28px;

// Form
$label-required-color: $highlight-color;
$label-color: $heading-color;
$form-warning-input-bg: $input-bg;
$form-error-input-bg: $input-bg;

// Select
$select-border-color: $border-color-base;
$select-item-selected-color: var(--select-item-selected-color);
$select-dropdown-bg: var(--select-dropdown-background);
$select-item-selected-bg: $selected-color;
$select-item-active-bg: $selected-color;
$select-item-hover-bg: var(--select-item-hover-bg);
$select-background: $component-background;

// Anchor
$anchor-border-color: $border-color-split;

// Tooltip
// Tooltip text color
$tooltip-color: var(--tooltip-color);
// Tooltip background color
$tooltip-bg: var(--tooltip-background);
// Tooltip arrow color
$tooltip-arrow-color: $tooltip-bg;

// Popover
// Popover body background color
$popover-bg: $component-background;
// Popover text color
$popover-color: $text-color;
// Popover arrow color
$popover-arrow-color: $popover-bg;
// Popover outer arrow width
// Popover outer arrow color
$popover-arrow-outer-color: $popover-bg;

// Modal
$modal-background: var(--modal-background);
$modal-header-bg: $modal-background;
$modal-header-border-color-split: $border-color-split;
$modal-heading-color: $heading-color;
$modal-content-bg: $modal-background;
$modal-footer-bg: transparent;
$modal-footer-border-color-split: $border-color-split;
$modal-mask-bg: rgba($black, 0.45);

// Progress
$progress-default-color: $processing-color;
$progress-remaining-color: $background-color-base;
$progress-text-color: $text-color;

// Menu
$menu-bg: $component-background;
$menu-popup-bg: $component-background;
$menu-item-color: $text-color;
$menu-highlight-color: $primary-6;
$menu-item-active-bg: $item-active-bg;
$menu-item-group-title-color: $text-color-secondary;

// dark theme
$menu-dark-color: $text-color-secondary-dark;
$menu-dark-bg: $layout-header-background;
$menu-dark-arrow-color: #fff;
$menu-dark-submenu-bg: #000c17;
$menu-dark-highlight-color: #fff;
$menu-dark-item-active-bg: $primary-6;
$menu-dark-selected-item-icon-color: $white;
$menu-dark-selected-item-text-color: $white;
$menu-dark-item-hover-bg: transparent;

$table-header-bg: $background-color-light;
$table-header-color: $heading-color;
$table-header-sort-bg: $background-color-base;
$table-body-sort-bg: rgba(0, 0, 0, 0.01);
$table-row-hover-bg: $select-item-hover-bg;
$table-selected-row-color: inherit;
$table-selected-row-bg: $selected-color;
$table-body-selected-sort-bg: $table-selected-row-bg;
$table-selected-row-hover-bg: $table-selected-row-bg;
$table-expanded-row-bg: #fbfbfb;
$table-footer-bg: $background-color-light;
$table-footer-color: $heading-color;
$table-header-bg-sm: transparent;
$table-header-sort-active-bg: var(--table-header-sort-active-bg);
$table-header-filter-active-bg: var(--table-header-filter-active-bg);

// Tag
$tag-default-bg: $background-color-light;
$tag-default-color: $text-color;

// TimePicker
$time-picker-selected-bg: $background-color-base;

// Badge
$badge-text-color: $component-background;

// Rate
// $rate-star-color: $yellow-6;
$rate-star-bg: $border-color-split;

// Card
$card-head-color: $heading-color;
$card-head-background: transparent;
$card-actions-background: $background-color-light;
$card-skeleton-bg: #cfd8dc;
$card-background: $component-background;
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);

// Comment
$comment-author-name-color: $text-color-secondary;
$comment-author-time-color: #ccc;
$comment-action-color: $text-color-secondary;
$comment-action-hover-color: #595959;

// Tabs
$tabs-card-head-background: $background-color-light;
$tabs-card-active-color: $primary-6;
$tabs-ink-bar-color: $primary-6;
$tabs-highlight-color: $primary-6;
$tabs-hover-color: $primary-5;
$tabs-active-color: $primary-7;
$tabs-card-tab-active-border-top: 2px solid transparent;

// BackTop
$back-top-color: #fff;
$back-top-bg: $text-color-secondary;
$back-top-hover-bg: $text-color;

// Avatar
$avatar-bg: var(--avatar-background);
$avatar-color: var(--text-color);

// Switch
$switch-background: var(--switch-background);
$switch-disabled-bg-color: var(--switch-disabled-bg-color);
$switch-disabled-after-color: var(--switch-disabled-after-color);
$switch-color: $primary-6;
$switch-shadow-color: rgba(#00230b, 0.2);
$switch-after-bg: var(--switch-after-bg);
$switch-loading-text-color: rgba(0, 0, 0, 0.65);

// Pagination
$pagination-border-default-color: var(--pagination-border-default-color);
$pagination-disabled-active-bg-color: var(--disabled-darken-bg-color10);
$pagination-item-bg-active: $primary-6;
$pagination-ellipsis-color: var(--pagination-ellipsis-color);
$pagination-active-text-color: var(--pagination-active-text-color);

// PageHeader
$page-header-back-color: #000;

// Breadcrumb
$breadcrumb-base-color: $text-color-secondary;
$breadcrumb-last-item-color: $text-color;
$breadcrumb-link-color: $text-color-secondary;
$breadcrumb-link-color-hover: $primary-5;
$breadcrumb-separator-color: $text-color-secondary;

// Step

// Slider
$slider-rail-background-color: var(--slider-rail-background-color);
$slider-rail-background-color-hover: $slider-rail-background-color;
$slider-track-background-color: $primary-6;
$slider-track-background-color-hover: $hover-color;
$slider-handle-background-color: #fff;
$slider-handle-color: $primary-6;
$slider-handle-color-hover: $hover-color;
// $slider-handle-color-focus: tint($primary-color, 20%);
// $slider-handle-color-focus-shadow: fade($primary-color, 20%);
$slider-handle-color-tooltip-open: $primary-6;
$slider-dot-border-color: $border-color-split;
// $slider-dot-border-color-active: tint($primary-color, 50%);
$slider-disabled-color: $disabled-color;
$slider-disabled-background-color: $component-background;

// Tree
$tree-directory-selected-color: #fff;
$tree-directory-selected-bg: $primary-6;
$tree-node-selected-bg: $primary-2;

// Collapse
$collapse-header-bg: $background-color-light;
$collapse-content-bg: $component-background;
$collapse-card-split-line: var(--collapse-card-split-line);

// Skeleton
$skeleton-color: #f2f2f2;

// Transfer
$transfer-disabled-bg: $disabled-bg;
$transfer-item-hover-color: $select-item-hover-bg;

// Message
$message-background: var(--message-background);

// Notification

// Alert
$alert-success-border-color: $success-3;
$alert-success-bg-color: $success-1;
$alert-success-icon-color: $success-color;
$alert-info-border-color: $info-3;
$alert-info-bg-color: $info-1;
$alert-info-icon-color: $info-color;
$alert-warning-border-color: $warning-3;
$alert-warning-bg-color: $warning-1;
$alert-warning-icon-color: $warning-color;
$alert-error-border-color: $danger-3;
$alert-error-bg-color: $danger-1;
$alert-error-icon-color: $error-color;

// List
$list-header-background: transparent;
$list-footer-background: transparent;

// Timeline
$timeline-color: $border-color-split;
$timeline-dot-color: $primary-6;
$timeline-dot-bg: $component-background;

// collapse-card
$collapse-card-bg: var(--collapse-card-background);
$collapse-card-header-bg: var(--collapse-card-header-bg);
$collapse-card-secondary-bg: var(--collapse-card-secondary-background);
$collapse-card-secondary-heard-bg: var(--collapse-card-secondary-heard-background);

// Search
$search-arrow-icon-bg: var(--search-arrow-icon-bg);
$search-result-item-hover-bg: $select-item-hover-bg;
$search-input-close-background: var(--search-input-close-background);

// pan
$pan-item-hover-bg: $select-item-hover-bg;

// dropdown
$dropdown-menu-item-hover-bg: var(--select-item-hover-bg);
$dropdown-background: var(--select-dropdown-background);

// swiper
$swiper-prev-next-background: var(--swiper-prev-next-background);
$swiper-pagination-bullet: var(--swiper-pagination-bullet);

//tdt
$tdt-map-switcher-layer-name-bg: var(--tdt-map-switcher-layer-name-bg);
$tdt-route-plan-hover-bg: var(--tdt-route-plan-hover-bg);

//compare
$compare-swiper-color: var(--compare-swiper-color);
$compare-swiper-background: var(--compare-swiper-background);

//TimeRange
$time-range-background: var(--time-range-background);
